<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<inputmsg @msg="childMsg"></inputmsg>
			
			<h3 v-if="msg_list.length==0">还没有评论哦</h3>
			<ul>
				<li v-for="item in msg_list">{{item.text}}</li>
			</ul>
		</div>
		
		
		
		
		
		<template id="InputText">
			<div>
				<input @keydown.enter="sumMsg" type="text" v-model="msg"/>
				<button value="发表" @click="sumMsg">发表</button>
			</div>
		</template>
		
		
		<script type="text/javascript">
			
			
			const inputmsg = {
				template:"#InputText",
				data(){
					return {
						msg:""
					}
				},
				methods:{
					sumMsg(){
						this.$emit("msg",{text:this.msg})
						this.msg = ""
					}
				}
			}
			
			
			
			new Vue({
				el:"#app",
				data:{
					msg_list:[]
				},
				methods: {
					childMsg(val) {
						this.msg_list.push(val)
					}
				},
				components:{
					inputmsg
				}
			})
		</script>
	</body>
</html>
